import { DownOutlined, UpOutlined } from "@ant-design/icons";
import { Button, Select, theme, Divider, Table, Space, message } from "antd";
import { useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";
import {
  getOrderInfo,
  searchOrderByKeys,
  changeManyState,
  delManyOrderInfo,
  getRefundByOrderId,
} from "../../../../utils/sendRequst";
import { mapBtn, mapState, mapChangeState, mapReBtn } from "../pubData"; //订单状态的map格式数据
import AdvancedSearchForm from "./orFrom"; // 搜索表单

const App = () => {
  const navigate = useNavigate();
  const { token } = theme.useToken();
  const listStyle = {
    textAlign: "center",
    background: token.colorFillAlter,
    borderRadius: token.borderRadiusLG,
    marginTop: 16,
  };
  //表头
  const columns = [
    {
      title: "订单序号",
      dataIndex: "orderId",
      key: "orderId",
    },
    {
      title: "商品单价",
      dataIndex: "productPrice",
      key: "productPrice",
    },
    {
      title: "下单时间",
      dataIndex: "orStartTime",
      key: "orStartTime",
    },
    {
      title: "用户账号",
      dataIndex: "user_phone",
      key: "user_phone",
    },
    {
      title: "订单金额",
      dataIndex: "orPrice",
      key: "orPrice",
    },
    {
      title: "订单状态",
      dataIndex: "stateName",
      key: "stateName",
    },
    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a
            onClick={() => {
              upData(record);
            }}
          >
            查看
          </a>
          <a
            onClick={() => {
              changeState(record.btnName, record.orderId);
            }}
          >
            {record.btnName}
          </a>
        </Space>
      ),
    },
  ];
  const [selectArr, setSelectArr] = useState([]);
  const [eventName, setEventName] = useState("");
  let [data, setData] = useState([]);

  //初始化页面所需数据
  useEffect(() => {
    getAllOrderInfo();
  }, []);
  const handleChange = (value) => {
    //批量操作，下拉框改变时触发
    setEventName(value); //批量操作，具体事件名
  };
  // 勾选的数组
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      //selectedRowKeys as id,selectedRows as data
      setSelectArr(selectedRowKeys);
    },
  };
  //批量操作
  function changeManState() {
    //获取被选中的数组，和批量操作事件
    if (eventName == "" || selectArr.length == 0) {
      message.error("请勾选数据或选着批量操作");
    } else {
      if (eventName == 4) {
        //批量删除
        delManyOrderInfo({ idArr: selectArr }).then((res) => {
          getAllOrderInfo();
        });
      } else {
        //状态改变
        let obj = {};
        obj.orState = mapChangeState.get(parseInt(eventName));
        obj.idArr = selectArr;
        changeManyState(obj).then((res) => {
          getAllOrderInfo();
        });
      }
    }
  }
  //改变订单状态
  function changeState(btnName, id) {
    let idArr = [];
    idArr.push(id);
    if (btnName == "编辑") {
      getRefundByOrderId({ id }).then((res) => {
        if (res.code == 200) {
          let { deal_type } = res.data[0];
          if (deal_type == 0) {
            navigate("/index/RefundMoneyList");
          } else {
            navigate("/index/RefundGoodsList");
          }
        }
      });
    } else if (btnName == "删除") {
      delManyOrderInfo({ idArr: idArr }).then((res) => {
        if (res.code == 200) {
          getAllOrderInfo();
        } else {
          message.error("删除错误");
        }
      });
    } else {
      //状态改变
      let obj = {};
      obj.orState = mapReBtn.get(btnName);
      obj.idArr = idArr;
      changeManyState(obj).then((res) => {
        getAllOrderInfo();
      });
    }
  }
  //点击查询，跳转到查询页面
  function upData(obj) {
    navigate("/index/orderDetail", { state: obj });
  }
  //获取所有表单数据
  function getAllOrderInfo() {
    getOrderInfo().then((res) => {
      if (res.code == 200) {
        dealData(res);
      } else {
        message.error("服务器错误");
      }
    });
  }
  //公用的数据返回处理
  function dealData(res) {
    let arr = res.data;
    arr = arr.map((item) => {
      item.key = item.orderId;
      item.stateName = mapState.get(item.orState);
      item.btnName = mapBtn.get(item.orState);
      return item;
    });
    setData(arr);
  }
  //筛选
  const changeSetData = (data) => {
    searchOrderByKeys(data).then((res) => {
      if (res.code == 200) {
        dealData(res);
      } else {
        message.error("服务器错误");
      }
    });
  };
  return (
    <div>
      <AdvancedSearchForm
        changeSetData={changeSetData}
        getAllOrderInfo={getAllOrderInfo}
      />
      <div style={listStyle}>
        <div
          style={{
            lineHeight: "2rem",
            display: "flex",
            alignItems: "baseline",
            justifyContent: "space-between",
            height: "2rem",
            padding: "1rem",
          }}
        >
          <h3>数据列表</h3>
          <div>
            <Select
              defaultValue="批量操作"
              onChange={handleChange}
              options={[
                { value: "0", label: "批量付款" },
                { value: "1", label: "批量确认" },
                { value: "2", label: "批量发货" },
                { value: "3", label: "批量完成" },
                { value: "4", label: "批量删除" },
              ]}
            />
            <Button onClick={changeManState}>确认</Button>
          </div>
        </div>

        <div style={{ lineHeight: "20rem" }}>
          <Divider />
          <Table
            rowSelection={{
              type: "checkbox",
              ...rowSelection,
            }}
            columns={columns}
            dataSource={data}
            pagination={{
              pageSize: 4,
            }}
          />
        </div>
      </div>
    </div>
  );
};
export default App;
